<template>
  <div class="app-container">
    <div class="head-container">
      <el-date-picker style="width: 400px;" class="filter-item" size="small"
      		v-model="timeValue"
           @change="handleDateChange"
      		type="daterange"
      		value-format="yyyy-MM-dd"
      		range-separator="至"
      		start-placeholder="开始日期"
      		end-placeholder="结束日期">
      </el-date-picker>
      <treeselect v-model="deptId" class="filter-item treeselect-main"
       @input="deptIdChange"
       :disableBranchNodes="false"
       :default-expand-level="2"
      :options="depts"  placeholder="选择部门" />
      <el-input v-model="userName" clearable @clear="init" placeholder="输入受训人员姓名搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchData">搜索</el-button>
    </div>
    <el-table v-loading="loading" :data="data" ref="table" size="small" style="width: 100%;" border>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column prop="userName" label="名称"  align="center"/>
      <el-table-column prop="score" label="分数"  align="center"/>
      <el-table-column prop="userAccount" label="账号"  align="center"/>
      <el-table-column prop="mapId" label="关卡名称" align="center"/>
      <el-table-column prop="createTime" label="训练时间"  align="center"/>
      <el-table-column prop="scoreInfo" label="扣分情况" align="center">
        <template slot-scope="{ row }">
          <el-link type="primary" style="font-size: 13px;" @click="info(row)">查看详情</el-link>
        </template>
      </el-table-column>
     <!-- <el-table-column prop="useTime" label="消灭所有燃烧物所用时间(秒)" width="220" align="center"/> -->
<!--      <el-table-column prop="restNum" label="未燃烧物资剩余数量" width="200" align="center"/>
      <el-table-column prop="burningSituation" label="重要物资燃烧情况" align="center"/>
      <el-table-column prop="fireExtinguisherUsage" label="灭火器使用情况" align="center"/> -->
    </el-table>
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
      <score-info ref="siFrom"></score-info>
  </div>
</template>

<script>
  import initData from '@/mixins/initData'
  import { getDepts } from '@/api/framework/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { formatSeconds,parseTime } from '@/utils/index'
  import scoreInfo from './scoreInfoFrom.vue'
  export default {
    mixins: [initData],
    components: {Treeselect ,scoreInfo},
    data() {
      return {
        timeValue:[],
        depts: [],
        deptId:null,
        loading: false,
        delLoading: false,
        userName:''
      }
    },
    created() {
      this.$nextTick(() => {
        this.init()
        this.getDepts()
      })
    },
    methods: {
      formatSeconds,
      parseTime,
      beforeInit() {
        this.url = 'train-grade/vrGrade'
        this.params = {
          page: this.page,
          size: this.size,
          userName:this.userName,
          deptId:this.deptId
        }
        if(this.timeValue!=null && this.timeValue.length>=2){
        	this.params.startTime=this.timeValue[0]
        	this.params.endTime=this.timeValue[1]
        }
        return true
      },
      handleDateChange(val) {
        if (!val) {
          this.timeValue = null;
          this.page=0
          this.init()
        }
      },
      getDepts() {
        getDepts({ enabled: true }).then(res => {
          this.depts = res.content
        })
      },
      deptIdChange(val){
        if (!val) {
          this.deptId = null;
          this.page=0
          this.init()

        }
      },
      searchData(){
        this.page=0
        this.init()
      },
      info(obj){
        this.$refs.siFrom.dialog = true
        this.$refs.siFrom.scoreInfoListStr=obj.scoreInfo;
      }
    }
  }
</script>

<style scoped>
  .el-range-editor--small.el-input__inner {
      height: 31px;
  }
  .treeselect-main {
      margin-top: 1px;
      line-height: 29px;
      width: 200px;
      .vue-treeselect__placeholder {
        line-height: 29px;
      }
      .vue-treeselect__control {
        height: 29px;
      }
    }
</style>
